<template>
  <el-menu
      :default-active="activeMenu==''?currentIndex:activeMenu"
      mode="horizontal"
      @select="handleSelect"
  >
    <template v-for="(item, index) in topMenus">
      <el-menu-item :style="{'--theme': theme}" :index="item.index" :key="index" v-if="index < visibleNumber"
      ><i :class="item.icon"/>
        {{ item.title }}
      </el-menu-item
      >
    </template>
    <!-- 顶部菜单超出数量折叠 -->
    <el-sub-menu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
      <template slot="title">更多菜单</template>
      <template v-for="(item, index) in topMenus">
        <el-menu-item
            :index="item.index"
            :key="index"
            v-if="index >= visibleNumber"
        ><i :class="item.icon"/>
          {{ item.title }}
        </el-menu-item
        >
      </template>
    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>
import {getmenuBar} from '@/utils/urls';
import {Tool} from "@/utils/tool";
import {ref, inject, reactive, onMounted, computed, watch, onBeforeMount, onBeforeUnmount} from 'vue';
import {useStore} from "vuex";
import {useRoute, useRouter} from "vue-router";
let visibleNumber = ref(5)
let isFrist = ref(false)
let currentIndex = ref('/admin/dashboard')
let routers = reactive(getmenuBar(Tool.getInstance().getLoginUser().resources))
let childrenMenus = reactive([])
const store: any = useStore();
const route: any = useRoute();
const router: any = useRouter();
const theme = computed({
  get: () => store.state.settings.theme,
  set: (val) => {
  }
})
const topMenus = computed({
  get: () => {
    
    let topMenus = [];
    routers.map((menu) => {
      if (menu.hidden !== true) {
        // 兼容顶部栏一级菜单内部跳转
        if (menu.path === "/") {
          topMenus.push(menu.children[0]);
        } else {
          topMenus.push(menu);
        }
      }
    });
    return topMenus;
  },
  set: (val) => {
  }
})
//默认激活的菜单
const activeMenu = computed({
  get: () => {
    //设置侧边导航路由
    var childrenMenus = [routers[0]];
    let activePath = '/admin/dashboard'
    routers.map((router) => {
      if (route.path.indexOf(router.index) != -1) {
        childrenMenus = router.subs == undefined ? [router] : router.subs;
        activePath = router.index
      }
    });
    if (route.path.indexOf("link/linkHome") != -1) {//不是内嵌页面

    } else {
      store.dispatch("tagsView/setsidebarRouters", childrenMenus);
      currentIndex.value = activePath;
      return activePath;
    }
  },
  set: (val) => {
  }
})
// 根据宽度计算设置显示栏数
const setVisibleNumber = () => {
  const width = document.body.getBoundingClientRect().width / 3;
  visibleNumber.value = parseInt(String(width / 85));
}
const gettopMenus = () => {
  let topMenus = [];
  routers.map((menu) => {
    // 兼容顶部栏一级菜单内部跳转
    if (menu.index === "/") {
      topMenus.push(menu.subs[0]);
    } else {
      topMenus.push(menu);
    }
  });
  return topMenus;
}
// 默认激活的路由
const defaultRouter = () => {
  let router;
  Object.keys(routers).some((key) => {
    if (!routers[key].is_show) {
      router = routers[key].path;
      return true;
    }
  });
  return router;
}
// 菜单选择事件
const handleSelect = (key: any, keyPath: any) => {
  currentIndex.value = key;
  activeRoutes(key);
}
// 当前激活的路由
const activeRoutes = (key: any) => {
  var routes = [];
  routers.map((item) => {
    if (key.indexOf(item.index) != -1) {
      routes = item.subs == undefined ? [item] : item.subs;
    }
  });
  if (routes.length > 0) {
    store.dispatch("tagsView/setsidebarRouters", routes);
  }
  return routes;
}
const ishttp = (url: any) => {
  return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
}
onBeforeMount(() => {
  window.addEventListener('resize', setVisibleNumber)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', setVisibleNumber)
})
onMounted(() => {
  
  setVisibleNumber();
})
</script>

<style>
.topmenu-container.el-menu--horizontal > .el-menu-item {
  display: inline-block !important;
  float: left;
  height: 50px !important;
  line-height: 50px !important;
  color: #999093 !important;
  padding: 0 5px !important;
  margin: 0 10px !important;
}

.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {

  color: #303133;
}

/* submenu item */
.topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title {
  float: left;
  height: 50px !important;
  line-height: 50px !important;
  color: #999093 !important;
  padding: 0 5px !important;
  margin: 0 10px !important;
}

#topmenu-container .el-menu-item i {
  width: 1em !important;
  height: 1em !important;
  vertical-align: -0.15em !important;
  fill: currentColor !important;
  overflow: hidden !important;
  font-size: 14px !important;
  margin: 0px !important;
}
</style>